<template>
	<view>
		<HeaderBar title="我的佣金" :opacity="opacity"/>
		<image src="../../static/组 205.png" mode="" class="bg"></image>
		<view class="header">
			<view class="header-top">
				当前余额
				<image src="/static/组 8078.png" mode=""></image>
			</view>
			<view class="header-money">{{balance}}</view>
			<view class="btn" @click="open">立即提现</view>
		</view>
		<view class="content">
			<view class="content-title">余额流水</view>
			<view class="content-subTitle">查看您的余额流水信息</view>
		</view>
		<view class="list">
			<view class="list-month">
				<picker mode="date" fields="month" @change="dateChange">
					<view class="list-month-l">
						<block v-if="params.month">
							<text style="margin-right: 10rpx;" >{{params.month + '月份'}}</text>
							 <u-icon name="arrow-down"></u-icon>
						</block>
						<block v-else>
							<text style="margin-right: 10rpx;color: #b2bac6;">请选择</text>
							<u-icon name="arrow-down" color="#b2bac6"></u-icon>
						</block>
					</view>
				</picker>
				<view class="list-month-r">{{month_balance}}¥</view>
			</view>
			<view class="list-item" v-for="it in list" :key="it.id">
				<view class="list-item-l">
					<view class="list-item-l-title">{{it.explan}}</view>
					<view class="list-item-l-time">{{it.updated_at}}</view>
				</view>
				<view class="list-item-status">{{it.type === 1 ? '分佣' : '提现'}}</view>
				<view class="list-item-r">{{it.price}}¥</view>
			</view>
			<view class="noData" style="padding-bottom:120rpx;" v-if="list.length === 0">
				<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" />
			</view>
		</view>
	</view>
</template>

<script>
	import HeaderBar from "@/components/header/header.vue"
	import {
		balanceLog
	} from '@/common/http/api.js'
	export default {
		components: {
			HeaderBar
		},
		data() {
			return {
				opacity: 1,
				params: {
					page: 1,
					year: '',
					month: ''
				},
				list: [],
				isList: true,
				balance: 0,
				month_balance: 0
			};
		},
		onLoad() {
			this.reload()
		},
		onReachBottom() {
			if (this.isList) {
				this.params.page++
				this.init()
			}
		},
		onPullDownRefresh: function() {
			console.log('我被下拉了');
			this.reload(1)
		},
		onPageScroll(event) {
		 //    const scrollTop = event.scrollTop;
		 //    // 计算透明度值
		 //    const opacity = Math.min(scrollTop / 100, 1);
			// this.opacity = opacity
			// console.log('opacity',opacity)
		  },
		methods:{
			open(){
				uni.showToast({
					title:'请到下线进行提现！',
					icon:'none'
				})
			},
			dateChange(e) {
				console.log('e', e)
				let time = e.detail.value.split('-')
				this.params.year = time[0]
				this.params.month = time[1]
				this.reload()
			},
			reload(type) {
				this.params.page = 1
				this.list = []
				this.init(type)
			},
			//0 默认 1上拉
			init(type = 0) {
				uni.showLoading()
				balanceLog(this.params).then(res => {
					this.balance = res.data.balance
					this.month_balance = res.data.month_balance
					if (Array.isArray(res.data.list) && res.data.list.length > 0) {
						if (this.params.page === 1) {
							this.list = res.data.list
						} else {
							this.list = this.list.concat(res.data.list)
						}
					} else {
						this.isList = false
					}
				}).finally(() => {
					uni.hideLoading()
					if (type === 1) {
						uni.stopPullDownRefresh();
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.bg {
		width: 100%;
		height: 600rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.header {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-bottom: 94rpx;

		.header-top {
			display: flex;
			align-items: center;
			padding-top: 50rpx;
			color: #c5beff;
			font-family: "PingFang SC";
			font-size: 24rpx;
			font-style: normal;
			font-weight: 400;

			image {
				width: 38rpx;
				height: 34rpx;
				margin-left: 40rpx;
			}
		}

		.header-money {
			color: #f7f8f8;
			font-family: "PingFang HK";
			font-size: 68rpx;
			font-style: normal;
			font-weight: 500;
			margin-bottom: 60rpx;
		}

		.btn {
			width: 200rpx;
			height: 60rpx;
			flex-shrink: 0;
			border-radius: 32rpx;
			background: #F5F5F5;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #0065ff;
			text-align: right;
			font-family: "PingFang SC";
			font-size: 24rpx;
			font-style: normal;
			font-weight: 500;

		}
	}

	.content {
		width: 100%;
		position: relative;
		background: white;
		box-sizing: border-box;
		padding: 0 40rpx;
		margin-bottom: 58rpx;

		.content-title {
			color: #112950;
			font-family: "PingFang SC";
			font-size: 48rpx;
			font-style: normal;
			font-weight: 400;
			margin-bottom: 4rpx;
		}

		.content-subTitle {
			color: #b2bac6;
			font-family: "PingFang SC";
			font-size: 30rpx;
			font-style: normal;
			font-weight: 400;
		}
	}

	.content::before {
		content: "";
		width: 100%;
		height: 45rpx;
		background: white;
		border-top-right-radius: 50rpx;
		position: absolute;
		top: -42rpx;
		left: 0;
	}

	.list {
		width: 100%;
		box-sizing: border-box;
		padding: 0 40rpx;

		.list-month {
			width: 100%;
			display: flex;
			align-items: center;
			margin-bottom: 28rpx;

			.list-month-l {
				color: #1a1d1f;
				font-family: "PingFang SC";
				font-size: 36rpx;
				font-style: normal;
				display: flex;
				align-items: center;
			}

			.list-month-r {
				color: #ff5959;
				font-family: "PingFang SC";
				font-size: 36rpx;
				font-style: normal;
				font-weight: 600;
				margin-left: 40rpx;
			}
		}

		.list-item {
			width: 100%;
			display: flex;
			align-items: center;
			padding-bottom: 20rpx;
			margin-bottom: 20rpx;
			border-bottom: 1rpx solid #E9EBED;
			.list-item-l {
				width: 170rpx + 182rpx;

				.list-item-l-title {
					margin-bottom: 8rpx;
					color: #171725;
					font-family: "PingFang SC";
					font-size: 28rpx;
					font-style: normal;
					font-weight: 500;
				}

				.list-item-l-time {
					color: #171725;
					font-family: "PingFang SC";
					font-size: 28rpx;
					font-style: normal;
					font-weight: 500;
				}
			}
			.list-item-status {
				color: #171725;
				 font-family: "PingFang SC";
				 font-size: 28rpx;
				 font-style: normal;
				 font-weight: 500;
				 flex: 1;
				 min-width: 0;
			}
			.list-item-r {
				color: #ff5959;
				 font-family: "PingFang SC";
				 font-size: 40rpx;
				 font-style: normal;
				 font-weight: 500;
			}
		}
	}
</style>